<template>
  <!-- 仪表盘组件 -->
  <div id="main" ref="GaugeChart" class="barEchart" style="width: 500px; height:500px" />
</template>
<script>
// import * as echarts from 'echarts'
export default {
  name: 'Gauge',
  data() {
    return {
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
    //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      const myChart = this.$echarts.init(this.$refs.GaugeChart)
      //   绘制图标
      myChart.setOption({

        series: [
          {
            type: 'gauge',
            data: [
              {
                value: 97,
                itemStyle: {
                  color: 'red'
                }
              }, // 每一个对象就代表一个指针
              {
                value: 85,
                itemStyle: { // 配置指针的颜色
                  color: 'green'
                }
              } // 每一个对象就代表一个指针
            ],
            min: 20 // 最小值 min max 代表仪表盘的取值范围
          }

        ]
      })
    }
  }
}
</script>
<style scoped>
.barEchart {
    /* background-color: pink; */
    border: 1px solid greenyellow;
}
</style>

